<template>
  <div>
    <!-- <p :class="{ red: true }">helloword</p> -->
    <!-- <p :class="{ red: age < 18 }">helloword</p> -->
    <!-- <p :class="['red', 'size']">helloword</p> -->
    <p :class="arr">helloword</p>
    <button @click="arr.push('lh')">点我</button>
    <!-- <p :style="{ color: 'white', fontSize: '30px' }">helloword</p> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 18,
      arr: ["red", "size"],
    };
  },
};
</script>

<style>
div {
  width: 200px;
  height: 200px;
  background-color: #0f0;
}
.red {
  color: red;
}
.size {
  font-size: 40px;
}
.lh {
  line-height: 200px;
}
</style>